<template>
  <div style="background: #F0F3F4">
    <!--页面头部-->
    <div class="bg-light lter b-b wrapper-md manage-school-title-box">
      <h1 class="m-n text-black font-thin">{{ $t('loc.magCenter') }}</h1>
      <div class="input-group">
        <el-input v-if="false" size="small" v-model="searchContent" class="manage-school-search"
                  :placeholder="$t('loc.search')" :suffix-icon="Search"></el-input>
      </div>
    </div>
    <!--页面主题-->
    <div  class="manage-school-main" v-loading="isSchoolsLoading">
      <div class="flex-align-justify">
        <div class="flex-row-vertical-center">
          <h2>{{ currentUser.defaultAgencyName }}</h2>
          <el-icon style="cursor: pointer;margin-left: 5px;" @click="editAgencyHandler">
            <Edit/>
          </el-icon>
        </div>
        <el-button type="primary" @click="addSchoolHandler">{{ $t('loc.addCenter') }}</el-button>
      </div>

      <div class="school-data-tables" v-if="schools && schools.length > 0">
        <div class="school-data-table-div" v-for="school in schools">
          <el-collapse accordion>
            <el-collapse-item name="1">
              <template #title>
                <div class="group-name"> {{ school.name }}
                  <span style="margin-left: 10px;"> ({{ school.groupCount }})</span>
                  <el-icon style="cursor: pointer;margin-left: 5px;" @click.stop="editSchoolHandler(school.id)">
                    <Edit/>
                  </el-icon>
                </div>
              </template>
              <div>
                <el-table border :data="school.groups"
                          stripe>
                  <el-table-column prop="name" :label="$t('loc.group')" width="180"/>
                  <el-table-column :label="$t('loc.assessmentInfoText')">
                    <template #default="scope">
                      <span style="margin-left: 10px">{{ scope.row.groupStage && scope.row.groupStage.name || '' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column width="100">
                    <template #default="scope">
                      <el-button type="text" size="mini" @click="operateGroupHandler('adminEdit', scope.row)">{{ $t('loc.edit') }}</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
          <el-button type="text" @click="operateGroupHandler('add', {schoolId: school.id})">{{ $t('loc.addClass') }}</el-button>
        </div>
      </div>
    </div>
    <SchoolOperateDialog @needReLoadData="initData" v-model:dialogVisible="dialogSchoolVisible" :operateType="schoolOperateType" :school-id="selectedSchoolId"></SchoolOperateDialog>
    <GroupOperateDialog @needReLoadData="initData" v-model:dialogVisible="dialogGroupVisible" :operateType="groupOperateType" :group="selectedGroup"></GroupOperateDialog>
  </div>
</template>

<script>

import {Search, CaretBottom, CaretRight, Edit} from "@element-plus/icons-vue";
import SchoolOperateDialog from "@/views/admin/manageSchools/SchoolOperateDialog";
import GroupOperateDialog from "@/views/modules/home/GroupOperateDialog"
import SchoolApi from "@/api/school";
import { useStore } from "vuex";
export default {
  name: "manageSchools",
  components: {
    Search,
    CaretBottom,
    CaretRight,
    Edit,
    SchoolOperateDialog,
    GroupOperateDialog
  },
  data() {
    return {
      isSchoolsLoading: false,
      dialogSchoolVisible: false,
      selectedSchoolId: '',
      schools: [],
      searchContent: '',
      schoolOperateType: '',
      Search: Search,
      dialogGroupVisible: false,
      selectedGroup: '',
      groupOperateType: '', // adminEdit edit add
    }
  },
  created() {
    this.initData()
  },
  computed: {
    currentUser () {
     return useStore().state.user.currentUser
    },
  },
  methods: {
    initData () {
      this.isSchoolsLoading = true
      let userId = this.currentUser.userId
      console.log(userId)
      SchoolApi.getSchoolsGroupByUserId(userId).then(res => {
        this.schools = res
        this.isSchoolsLoading = false
      }).catch(error => {
        this.$message.error(error.response.data.description)
        this.isSchoolsLoading = false
      })
    },
    // tableSwitch(schoolId) {
    //   if (this.showSchoolIdTableList.includes(schoolId)) {
    //     this.showSchoolIdTableList = this.showSchoolIdTableList.filter(item => item !== schoolId)
    //   } else {
    //     this.showSchoolIdTableList.push(schoolId)
    //   }
    // },
    editSchoolHandler (schoolId) {
      this.schoolOperateType = 'edit'
      this.dialogSchoolVisible = true
      this.selectedSchoolId = schoolId
    },
    addSchoolHandler () {
      this.schoolOperateType = 'add'
      this.dialogSchoolVisible = true
      this.selectedSchoolId = ''
    },
    dialogSchoolClosed () {
      this.dialogSchoolVisible = false
    },
    operateGroupHandler (type, data) {
      this.groupOperateType = type
      this.dialogGroupVisible = true
      this.selectedGroup = data
    },
  },
  mounted() {
  }
}
</script>

<style scoped lang="less">
.manage-school-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.manage-school-search {
  width: 240px;
  height: 34px;

  /deep/ .el-input__wrapper {
    border-radius: 20px;
  }
}

.manage-school-main {
  display: block;
  padding: 30px 50px 0 30px;
  margin: 0 auto;
  height: calc(100% - 110px);
  overflow-y: auto;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #0a1015;
}
/deep/ .el-collapse-item__wrap {
}
/deep/ .el-collapse {
  border-width: 0;
}
/deep/ .el-collapse-item__header {
}

.school-data-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  overflow-y: auto;
  align-content: flex-start;
  // flex 元素间隔
  .school-data-table-div {
    height: fit-content;
    padding: 10px 20px;
    width: calc((100% - 180px) / 2);
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
  }
}
.group-name {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
</style>
